<template>
  <div id="main">
    <el-form :inline="true" :model="queryData">
      <el-form-item label="日期">
        <el-date-picker v-model="queryData.date" type="date" placeholder="选择日期" style="width:160px"></el-date-picker>
      </el-form-item>
      <el-form-item label="维保期">
        <el-select v-model="queryData.isOutOf" placeholder="是否过维保" style="width:160px" clearable >
          <el-option
            v-for="item in repairIsOutOfOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备">
        <el-input class="add-input" v-model="queryData.name" placeholder="请输入关键词" style="width:160px"></el-input>
      </el-form-item>
      <!-- <el-form-item label="设备">
        <el-select v-model="queryData.name" placeholder="设备名称">
          <el-option
            v-for="item in nameOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button class="greenButton" type="primary" @click="onQuery">查询</el-button>
        <el-button class="greenButton" type="primary" @click="reset()">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right;">
          <el-button type="primary" class="greenButton" @click="dleMany()">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
       ref="multipleTable"
      @selection-change="handleSelectionChange"
      style="width: 100%;border:1px solid #00BDAC;"
        height="78%"
      :data="equipmentList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF'}"
    >
      <el-table-column
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column align="center" type="index" :index="table_index" label="序号" width="50px"></el-table-column>
      <el-table-column align="center" prop="di_time" label="日期" width="180px"></el-table-column>
      <el-table-column align="center" prop="epuipment.eq_model" label="设备编号"></el-table-column>
      <el-table-column align="center" prop="epuipment.eq_name" label="设备名称"></el-table-column>
      <el-table-column align="center"  label="设备位置">
        <template slot-scope="scope">
          <span>{{scope.row.address}}{{scope.row.epuipment.eq_room}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"  width="80px" label="是否过保">
        <template slot-scope="scope">
          <span>{{scope.row.is_over_repair == 0?'维保内':'维保外'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备图片">
        <template slot-scope="scope">
          <el-image v-if="scope.row.epuipment.eq_img&&scope.row.epuipment.eq_img!='null'" :src="scope.row.epuipment.eq_img" alt  style="height:50px;width:50px;" :preview-src-list="srclist" @click="chakan(scope.row.epuipment.eq_img)"></el-image>
          
        </template>
      </el-table-column>
      <el-table-column align="center" prop="route_desc" label="故障描述"></el-table-column>
        <el-table-column align="center" prop="route_desc" width="200px" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="greenButton"
              style="border: none"
              :style="{backgroundColor:'#FB1C89'}"
              @click="deleteClick(scope.row)"
            >删除</el-button>
          </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="detail" width="80px" label="详情">
        <template slot-scope="scope">
          <a href="javacript:void(0)" @click="onDetailclick(scope.row)">查看详情</a>
        </template>
      </el-table-column> -->
    </el-table>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next, jumper"
        :total="equipmentList.length"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>

      <el-button class="greenButton" @click="daochu" type="primary">导出/下载</el-button>
    </div>

    <el-dialog
      :visible.sync="isShowDetail"
      :show-close="false"
      class="detail-dialog"
      width="1100px"
    >
      <el-table
        :data="detailTable"
        border
        style="width: 100%"
        :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF'}"
      >
        <el-table-column align="center" type="index" label="序号"></el-table-column>
        <el-table-column align="center" prop="person" label="巡更人"></el-table-column>
        <el-table-column align="center" prop="order" label="设备编号"></el-table-column>
        <el-table-column align="center" prop="name" label="设备名称"></el-table-column>
        <el-table-column align="center" prop="location" label="维修地点"></el-table-column>
        <el-table-column align="center" prop="time" label="维修时间"></el-table-column>
        <el-table-column align="center" prop="finishDate" label="完成时间"></el-table-column>
        <el-table-column align="center" prop="material" label="耗材品种"></el-table-column>
        <el-table-column align="center" prop="materialNum" label="耗材数量"></el-table-column>
        <el-table-column align="center" prop="costMoney" label="维修金额"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :visible.sync="isShowEdit"
      destroy-on-close
      :show-close="false"
      class="edit-dialog"
      width="1100px"
    >
      <div slot="title" class="edit-dialog-title">编辑巡查更任务</div>
      <el-form class="edit-form" label-width="100px">
        <el-form-item label="巡更时间：">
          <el-date-picker v-model="editFormData.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="巡更人：">
          <el-select v-model="editFormData.person" placeholder="请选择状态">
            <el-option v-for="item in personList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡更路线：">
          <el-select v-model="editFormData.person" placeholder="请选择状态">
            <el-option
              v-for="item in routeList"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            ></el-option>
          </el-select>
          <div class="add-green-text">
            <img src="../../../../static/add.jpg" alt />
            <img src="../../../../static/cutdown.jpg" alt />
            <span>添加删除寻更路线</span>
          </div>
        </el-form-item>
        <el-form-item label="备注要求：">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editFormData.tips"></el-input>
        </el-form-item>
        <el-form-item class="message-button">
          <el-button class="yellowButton">短信提醒</el-button>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="cancel" class="pinkButton" type="primary">取消</el-button>
        <el-button @click="submit" class="greenButton" type="primary">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data: function() {
    return { 
      srclist:['https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'],
      queryData: {
        date: "",
        isOutOf: "",
        name: ""
      },

      repairIsOutOfOptions: [
        {
          value: "0",
          label: "维保内"
        },
        {
          value: "1",
          label: "维保外"
        }
      ],

      equipmentList: [],
      zonglist:[],

      currentPage: 1,
      pagesize:10,
      isShowDetail: false,

      detailTable: [
        {
          person: "张三",
          order: "100000",
          name: "打印机",
          location: "1号楼5层103",
          time: "2天",
          finishDate: "12.7",
          material: "红色墨盒 黑色墨盒",
          materialNum: "2盒",
          costMoney: "￥200"
        }
      ],

      isShowEdit: false,

      editFormData: {
        date: "",
        person: "",
        route: "",
        tips: ""
      },

      personList: ["张三", "李四", "王五"],

      routeList: [
        {
          value: "1",
          label: "一号线"
        },
        {
          value: "2",
          label: "二号线"
        },
        {
          value: "3",
          label: "三号线"
        },
        {
          value: "4",
          label: "四号线"
        }
      ],
       multipleSelection:[],
    };
  },
  created(){
    console.log(112)
  },
  mounted() {
    console.log(112)
   this.huoqu();
  },
  methods: {
    dleMany(){
      console.log(this.multipleSelection)
      if(this.multipleSelection.length==0){
        return this.$message.error('请选择您要删除的信息')
      }
      const arr = []
      this.multipleSelection.forEach((item)=>{
          arr.push(item.id)
      })
      console.log(arr.join(','))
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let parme = {
                ids:arr.join(',')
              }
              console.log(parme)
              this.ajaxCommon.ajax({
                    url: 'dispatchdelete',
                    data:parme,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                           this.huoqu();
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
    },
    handleSelectionChange(selection){
        console.log(selection)
        this.multipleSelection = selection
    },
    deleteClick(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           console.log(row)
           let param = {
             'ids':row.id
           }
         this.ajaxCommon.ajax({
            url: 'dispatchDelete',
            methods:'get',
            data: param,
            success: (res) => {
              console.log(res)
              if(res.code == 200){
                this.huoqu();
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration:'2000'
                  });
              }else{
                this.$message({
                    message: res.status,
                    type: 'error',
                    duration:'2000'
                  });
              }
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    table_index(index){
        return (this.currentPage -1) * this.pagesize + index + 1
      },
    chakan(img){
      console.log(11111)
      this.srclist[0] = img;
      console.log(this.srclist);
    },
    huoqu(){
      console.log(112)
      this.ajaxCommon.ajax({
                    url:'repair_eqlist0',
                    success: (res) => {
                      console.log('自动派单数据',res)
                      if(res.code == 200){
                        this.equipmentList = res.data;
                        this.zonglist = res.data;
                      }
                     
                     
                    }
                });

    },
    reset(){
      this.queryData.date = ''
      this.queryData.isOutOf = ''
      this.queryData.name = ''
      this.onQuery()
    },
    onQuery() {
     // console.log(this.queryData);
       let datatime = '';
          if(this.queryData.date){
            let datayear = this.queryData.date.getFullYear();
            let datamonth = this.queryData.date.getMonth() + 1;
            let datadate = this.queryData.date.getDate();
            if(datamonth/10 < 1){
              datamonth = '0'  + datamonth;
            }
            if(datadate/10 < 1){
              datadate = '0'  + datadate;
            }
            datatime = datayear + '-' + datamonth + '-' + datadate;
          }
          console.log(datatime)
           if(datatime && !this.queryData.isOutOf && !this.queryData.name){
            let arr = [];
            this.zonglist.forEach(item => {
              if(datatime == item.di_time){
                arr.push(item)
              }
            })
            this.equipmentList = arr;
            console.log('只时间搜索')
          }

          if(!datatime && this.queryData.isOutOf && !this.queryData.name){
            let arr = []; 
            this.zonglist.forEach(item => {
              if(this.queryData.isOutOf == item.is_over_repair){
                arr.push(item)
              }
            })
            this.equipmentList = arr;
            console.log('只维保期')
          }
          if(!datatime && !this.queryData.isOutOf && this.queryData.name){
              let arr = [];   
              this.zonglist.forEach(item => {
               if (item.epuipment.eq_name.search(this.queryData.name) != -1) {
                  arr.push(item)
                 }  
              })
              this.equipmentList = arr;
              console.log('只设备名')
          }

          if(datatime && this.queryData.isOutOf && !this.queryData.name){
            let arr = [];
            this.zonglist.forEach(item => {
              if((datatime == item.di_time) && (this.queryData.isOutOf == item.is_over_repair)){
                arr.push(item)
              }
            })
            this.equipmentList = arr; 
            console.log('时间和维保期')

          }

        
          

           if(datatime && !this.queryData.isOutOf && this.queryData.name){
              let arr = [];   
              this.zonglist.forEach(item => {
               if ((datatime == item.di_time) && (item.epuipment.eq_name.search(this.queryData.name) != -1)) {
                  arr.push(item)
                 }  
              })
              this.equipmentList = arr;
              console.log('时间和设备名')
          }

           if(datatime && this.queryData.isOutOf && this.queryData.name){
              let arr = [];   
              this.zonglist.forEach(item => {
               if ((datatime == item.di_time) && (this.queryData.isOutOf == item.is_over_repair) && (item.epuipment.eq_name.search(this.queryData.name) != -1)) {
                  arr.push(item)
                 }  
              })
              this.equipmentList = arr;
              console.log('三者都')
          }

           if(!datatime && this.queryData.isOutOf && this.queryData.name){
              let arr = [];   
              this.zonglist.forEach(item => {
               if ((this.queryData.isOutOf == item.is_over_repair) && (item.epuipment.eq_name.search(this.queryData.name) != -1)) {
                  arr.push(item)
                 }  
              })
              this.equipmentList = arr;
              console.log('设备名和维保外')
          }

          if(!datatime&&!this.queryData.name&&this.queryData.isOutOf == ''){
            let arr = [];
            this.zonglist.forEach(item => {
                arr.push(item)
            })
            this.equipmentList = arr;
            console.log('搜索为空')
          }


    },
    daochu(){
      console.log(11111111111)
     window.location.href = "http://hqgj.heweixiao.cn/export_zidong"
    },
    onDetailclick(row) {
      this.isShowDetail = true;
      console.log(row);
    },
    handleRemind(row) {
      console.log(row);
    },
    handleEdit(row) {
      this.isShowEdit = true;
      console.log(row);
    },
    handleCancel(row) {
      console.log(row);
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    submit(){
      this.isShowEdit = false;
    },
    cancel(){
      this.isShowEdit = false;
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
}

a {
  color: #00bdac;
  text-decoration: none;
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.edit-dialog-title {
  color: #ffffff;
  padding-left: 30px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  background: #00bdac;
}

.edit-form {
  width: 530px;
}

.message-button {
  text-align: right;
}

.add-green-text {
  display: inline-flex;
  color: #00bdac;
  width: 140px;
  justify-content: space-between;
  align-items: center;
  vertical-align: bottom;
  margin-left: 14px;

  img {
    cursor: pointer;
    width: 22px;
    height: 22px;
  }
}
</style>

<style lang="less">
.detail-dialog {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;
    height: 450px;
  }
}

.edit-dialog {
  .el-dialog__header {
    padding: 0;
  }
}
</style>
